import React from "react";
import { Row, Col, Button, Form, Input, InputNumber, Radio, notification } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from "antd/lib/form/Form";
import { DropDownSelect } from '@/components/DropDownSelect';
import TextArea from 'antd/lib/input/TextArea';
import ImgViewer from '@/components/ImgViewer';
import Entrance from './formEntrance';
import elec from '@/assets/images/archives/elec.png';
import elecSel from '@/assets/images/archives/elecSel.png';
import paper from '@/assets/images/archives/paper.png';
import paperSel from '@/assets/images/archives/paperSel.png';
import { checkInit } from '@/utils/util';
import CylinderModal from './cylinderModal';
import ProtectedModal from './protectedModal';

interface IProps extends FormComponentProps {
  dispatch?: Function;
  children?: React.ReactNode;
  loading?: boolean;
  dict?: any;
  onClick?: Function;
  data: {
    position: string;
    medicamentSpecies: string;
    outfireForm: string;
    systemForm: string;
    bottleBankPosition: string;
    systemStatus: string;
    nozzleQuantity: string;
    actionForm: string;
    dutyDepartment: string;
    dutyName: string;
    maintenanceOwnerName: string;
    url: string;
    steelCylinderItem: Array<any>;
    protectedAreaItem: Array<any>;
  }
}


@connect(({ archives_devices, loading }) => ({
  //   data: archives_unit.data,
  dict: archives_devices.dict || {},
}))
class Gas extends React.PureComponent<IProps, any> {
  state = {
    entrance: null,
    cylinderVisible: false,
    protectedVisible: false,
  }

  componentDidMount() {
    checkInit();
    this.queryData();
  }

  queryData() {
    const { form, data } = this.props;

    if (data) {
      const {
        url,
        protectedAreaItem,
        steelCylinderItem,
        ...items
      } = data;
      const ans = {
        ...items
      }
      this.setState({
        url,
      }, () => form.setFieldsValue(ans))

    }
  }

  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'archives_devices/modifyDevice',
          payload: {
            gasOutfireItem: [values],
          }
        })
      } else {
        notification['error']({
          message: `保存失败`,
          description: '字段验证不通过',
        });
      }
    })
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const ButtonItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
    };
    return (
      <>
        <Form style={{ marginTop: '30px' }} onSubmit={this.handleSubmit}>
          <Button type="primary"
            style={{ position: 'absolute', right: '5px', top: '45px' }}
            onClick={() => this.props.onClick()}
          >切换到纸质台账</Button>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="设置部位"
                {...formItemLayout}
              >
                {getFieldDecorator('position')(
                  <Input placeholder="请输入部位" />
                )}
              </Form.Item>
            </Col>
            <Col key={2} span={10}>
              <Form.Item
                label="药剂种类"
                {...formItemLayout}
              >
                {getFieldDecorator('medicamentSpecies')(
                  <Input placeholder="请输入" />
                )}
              </Form.Item>
            </Col>
            <Col key={3} span={4} />
          </Row>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="灭火形式"
                {...formItemLayout}
              >
                {getFieldDecorator('outfireForm')(
                  DropDownSelect(dict, 'gas.outfire.form')
                )}
              </Form.Item>
            </Col>
            <Col key={2} span={10}>
              <Form.Item
                label="系统形式"
                {...formItemLayout}
              >
                {getFieldDecorator('systemForm')(
                  DropDownSelect(dict, 'auto.outfire.system.form', 'multiple')
                )}
              </Form.Item>
            </Col>
            <Col key={3} span={4} />
          </Row>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="瓶库位置"
                {...ButtonItemLayout}
                style={{}}
              >
                {getFieldDecorator('bottleBankPosition')(
                  <Input placeholder="请输入" />
                )}
                <Button style={{ position: 'absolute' }} type="link" onClick={() => {
                  this.setState({ cylinderVisible: true })
                }}>钢瓶数量</Button>
              </Form.Item>
            </Col>
            <Col key={2} span={10}>
              <Form.Item
                label="系统状态"
                {...formItemLayout}
              >
                {getFieldDecorator('systemStatus')(
                  DropDownSelect(dict, 'fire.indoor.system.status')
                )}
              </Form.Item>
            </Col>
            <Col key={3} span={4} />
          </Row>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="动作方式"
                {...formItemLayout}
              >
                {getFieldDecorator('actionForm')(
                  DropDownSelect(dict, 'gas.outfire.action.form')
                )}
              </Form.Item>
            </Col>
            <Col key={2} span={10}>
              <Form.Item
                label="喷头数量"
                {...formItemLayout}
              >
                {getFieldDecorator('nozzleQuantity')(
                  <Input type='number' placeholder="请输入" addonAfter='只' />
                )}
              </Form.Item>
            </Col>
            <Col key={3} span={4} />
          </Row>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="责任部门"
                {...formItemLayout}
              >
                {getFieldDecorator('dutyDepartment')(
                  <Input placeholder="请输入责任部门" />
                )}
              </Form.Item>
            </Col>
            <Col key={2} span={10}>
              <Form.Item
                label="责任人"
                {...formItemLayout}
              >
                {getFieldDecorator('dutyName')(
                  <Input placeholder="请输入责任人" />
                )}
              </Form.Item>
            </Col>
            <Col key={3} span={4} />
          </Row>
          <Row>
            <Col key={1} span={10}>
              <Form.Item
                label="维修保养单位"
                {...formItemLayout}
              >
                {getFieldDecorator('maintenanceOwnerName')(
                  <Input placeholder="请输入单位" />
                )}
              </Form.Item>
            </Col>
            <Col key={2} offset={2} span={2}>
              <Button type='link' onClick={() => {
                this.setState({ protectedVisible: true })
              }}>防护区清单</Button>
            </Col>
            <Col key={3} span={10} />
          </Row>
          <Button style={{ marginLeft: '5%', marginTop: '10%' }} type="primary" htmlType="submit">保存</Button>
        </Form>
        <CylinderModal
          visible={this.state.cylinderVisible}
          cancelMaintenance={() => this.setState({ cylinderVisible: false })}
        />
        <ProtectedModal
          visible={this.state.protectedVisible}
          cancelMaintenance={() => this.setState({ protectedVisible: false })}
        />
      </>
    )
  }
}

const GasEx = Form.create<IProps>()(Gas);
export default GasEx;